<template>
  <div>
    <van-nav-bar
      title="评价"
      left-text="返回"
      left-arrow
      @click-left="back"
    >
      <template #left>
        <van-icon name="arrow-left" size="20"/>
      </template>
      <template #right>
        <van-button
          size="small" round
          color="linear-gradient(to right, #ff6034, #ee0a24)"
          class="submit-btn" @click="submit">
          提交
        </van-button>
      </template>
    </van-nav-bar>

    <div class="card">
      <div class="pro-info">
        <img
          class="order-thumb"
          v-lazy="picUrl"
        />
        <div class="pro-tag">
          <span>测试标题</span>
          <br>
          <span class="pro-type">测试属性</span>
        </div>
      </div>
      <div v-if="isDevice">

        <div class="rate-item">
          <span>重量</span>
          <van-rate
            class="rate"
            v-model="form.weight"
            :size="20"
            color="#E65D6E"
            void-icon="star"
            void-color="#eee"
          />

        </div>

        <div class="rate-item">
          <span>爆发</span>
          <van-rate
            class="rate"
            v-model="form.burst"
            :size="20"
            color="#E65D6E"
            void-icon="star"
            void-color="#eee"
          />
        </div>
        <div class="rate-item">
          <span>手感</span>
          <van-rate
            class="rate"
            v-model="form.feel"
            :size="20"
            color="#E65D6E"
            void-icon="star"
            void-color="#eee"
          />
        </div>
        <div class="rate-item">
          <span>做工</span>
          <van-rate
            class="rate"
            v-model="form.work"
            :size="20"
            color="#E65D6E"
            void-icon="star"
            void-color="#eee"
          />
        </div>
        <div class="rate-item">
          <span>整体评分</span>
          <van-rate
            class="rate"
            v-model="form.whole"
            :size="20"
            color="#E65D6E"
            void-icon="star"
            void-color="#eee"
          />

        </div>
      </div>
      <div v-else>

        <div class="rate-item">
          <span>凉度</span>
          <van-rate
            class="rate"
            v-model="form.coolness"
            :size="20"
            color="#E65D6E"
            void-icon="star"
            void-color="#eee"
          />

        </div>
        <div class="rate-item">
          <span>甜度</span>
          <van-rate
            class="rate"
            v-model="form.Sweetness"
            :size="20"
            color="#E65D6E"
            void-icon="star"
            void-color="#eee"
          />
        </div>
        <div class="rate-item">
          <span>还原度</span>
          <van-rate
            class="rate"
            v-model="form.reduction "
            :size="20"
            color="#E65D6E"
            void-icon="star"
            void-color="#eee"
          />
        </div>

        <div class="rate-item">
          <span>整体评分</span>
          <van-rate
            class="rate"
            v-model="form.whole"
            :size="20"
            color="#E65D6E"
            void-icon="star"
            void-color="#eee"
          />

        </div>

      </div>
      <van-divider/>
      <van-field
        v-model="form.message"
        rows="2"
        autosize
        type="textarea"
        maxlength="200"
        placeholder="从多个角度评价宝贝，可以帮助更多想买的人"
        show-word-limit
      />
    </div>

  </div>
</template>

<script>

import OrderDetail from '@/components/OrderDetail'

export default {
  name: 'detail',
  components: {OrderDetail},

  data () {
    return {
      form: {},
      isDevice: true,
      picUrl: 'https://img.yzcdn.cn/upload_files/2017/02/21/FjKTOxjVgnUuPmHJRdunvYky9OHP.jpg!100x100.jpg'

    }
  },
  methods: {
    back () {
      this.$router.back()
    },
    recived (index) {
      return index === 0 && this.info.status === '1'
    },
    submit () {

    }

  }
}
</script>

<style scoped>
@import "../../assets/icon/iconfont.css";

.rate {
  margin-left: 10px;
}

.rate-item {
  display: flex;
  flex-direction: row;
  align-items: center;
  font-size: 14px;
  margin-top: 5px;
  padding: 10px 0px;
}

.pro-tag {
  margin-left: 10px;
}

.pro-type {
  display: inline-block;
  margin-top: 10px;
  font-size: 12px;
  color: #c5c5c5;
}

.pro-info {
  display: flex;
  flex-direction: row;
}

.order-thumb {
  width: 50px;
  height: 50px;
}

.submit-btn {
  padding: 0 20px;
  font-size: 12px;
}
</style>
